<script setup>
defineProps({
  list: Array,
})
</script>

<template>
  <view class="shop">
    <navigator class="shop-item" v-for="item in list" url="/pages/goods/goods" :key="item.id">
      <view class="img">
        <image class="image" mode="aspectFit" :src="item.header" />
      </view>
      <view class="content">
        <view class="name">{{ item.name }}</view>
        <view class="notice">店铺公告：{{ item.notice }}</view>
        <view class="price">
          <view class="startPrice"
            >起送价:<text>{{ item.startPrice }}元</text></view
          >
          <view class="endPrice"
            >配送价:<text>{{ item.endPrice }}元</text></view
          >
        </view>
      </view>
    
    </navigator>
  </view>
</template>

<style lang="less">
.shop {
  display: flex;
  flex-direction: column;
  margin: 15rpx 20rpx;
  min-height: 210rpx;
  // background-color: pink;
  .shop-item {
    display: flex;
    flex-direction: row;
    margin-bottom: 18rpx;
    border: 1px solid #3c3b3b;
    border-radius: 15rpx;
    .img {
      margin-right: 18rpx;
      width: 210rpx;
      height: 210rpx;
      image {
        width: 210rpx;
        height: 210rpx;
        border-radius: 15rpx;
      }
    }
    .content {
      flex: 1;
      // background-color: aquamarine;
      .name {
        font-size: 35rpx;
        font-weight: 600;
        line-height: 58rpx;
      }
      .notice {
        font-size: 28rpx;
        line-height: 48rpx;
        color: #3c3b3b;
        /* 溢出隐藏设置 */
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        max-width: 420rpx;
        text-overflow: ellipsis;
      }
      .price {
        display: flex;
        justify-content: space-between;
        width: 420rpx;
        font-size: 28rpx;
        line-height: 48rpx;
        color: #3c3b3b;
        text {
          color: #cf4444;
        }
      }
    }
  }
}
</style>
